<template>
  <div class="app-container">
    <el-breadcrumb separator="/" class="home-breadcrumb">
      <el-breadcrumb-item :to="{ path: '/home/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>教师管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--筛选搜索-->
    <el-card class="filter-container">  
      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="formInline"
          size="small"
          label-width="140px"
          class="demo-form-inline"
        >
        <el-row style="display:flex">       
            <el-form-item label="" label-width="180px">
              <el-input style="margin-left:20px" class="textarea" v-model="formInline.name" placeholder="请输入姓名/职工号/学院/专业" prefix-icon="el-icon-search"></el-input>
            </el-form-item>          
            <el-form-item>
              <el-button
                style="margin-left:25px"
                @click="handleResetSearch()"
                size="small"
              >重置</el-button>
            </el-form-item>          
            <el-form-item>
              <el-button style="float: left; margin-left: 15px" type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>        
        </el-row>
        </el-form>
      </div>   
    </el-card>
     <!--列表-->
    <el-card class="table-container">   
      <i class="el-icon-tickets"></i>
      <span>教师列表</span>  
      <el-button type="warning" size="small" style="float:right;">导出教师</el-button>
      <el-table
        :data="signData"
        border
        stripe
        style="width: 100%;margin-top:20px;"
        :default-sort="{ prop: 'date', order: 'descending' }"
        @selection-change="changeBox"
      >
        <el-table-column type="selection" width="55" :disable="isdisable">
        </el-table-column>
        <el-table-column prop="avatar" label="头像" align="center">
          <template slot-scope="scope">
            <el-avatar :size="35" :src="scope.row.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" sortable align="center">
          <template slot-scope="scope">
            <p>{{scope.row.name}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别"  align="center">
          <template slot-scope="scope">
            <p>{{scope.row.sex}}</p>
          </template>
        </el-table-column>
        
        <el-table-column prop="age" label="年龄" sortable align="center">
          <template slot-scope="scope">
            <p>{{scope.row.age}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="电子邮箱" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.email}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="academy" label="教职工号" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.academy}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="university" label="学校" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.university}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="academy" label="学院" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.academy}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="academy" label="专业" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.academy}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="kq" label="开放考勤结果" align="center">
          <template slot-scope="">
            <p>是</p>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
          <template slot-scope="">
            <p>是</p>
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作" align="center">
          <template slot-scope="">
           <el-button
              type="primary"
              size="mini"
              @click="dialogTableVisible=true"
            >新增备注</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next,jumper"
          :current-page.sync="formInline.pageNum"
          :page-size="formInline.pageSize"
          :page-sizes="[5, 10, 15]"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
    

    <el-dialog
          title="新增备注"
          :visible.sync="dialogTableVisible"         
    >
      <div> 
      <el-form>
        <el-row>  
        <el-form-item label="" >
          <el-input v-model="remark" placeholder="请输入备注信息"></el-input>
        </el-form-item>
        </el-row>
      </el-form>  
      </div>
      <div style="margin-left:80%"> 
        <el-button type="info" size="small"  @click="dialogTableVisible=false">取消</el-button>
        <el-button type="primary" size="small"  @click="Alldelete()">确定</el-button>  
      </div>
    </el-dialog>

    <el-dialog
          title="新增教师"
          :visible.sync="dialogTableVisible2"
          width="410px"
          
    >
    <div class="tinput"> 
      <el-form>
        <el-row style="display:flex;margin:0;align-items: center;">
        <span style="font-size: 16px;">教职工号</span>
        <el-form-item label="" style="margin-bottom:0">
          <el-input class="jzgh" v-model="teaid" placeholder="请输入教职工号"></el-input>
        </el-form-item>
        </el-row>
      </el-form>  
    </div>
    <div style="text-align: center;margin-top:16px;">
        
        <el-button type="info" size="small" style="margin-right: 20px;width:67px;border-radius:10px" @click="dialogTableVisible2=false">取消</el-button>
        
        <el-button type="primary" size="small" style="width:67px;border-radius:10px" @click="addteacher">确定</el-button>
         
      </div>
    </el-dialog>

    <el-dialog
          title="提示"
          :visible.sync="dialogTableVisible3"
          width="350px"
          top="250px"
               
    >
    <div style="text-align: center;font-size: 16px;color: rgba(217, 0, 27, 0.996078431372549);">该职工号未绑定，添加失败！！</div>
    </el-dialog>

  </div>
</template>

<script>
const defaultFormInline = {
  pageNum: 1,
  pageSize: 10,
  university: null,
  academy: null,
  name: null
}
export default {
  name: 'academyteacher',
  data() {
    return {
      signlist: [],
      signData: [],
      selectedList: [],
      formInline: {
        name: '',
        pageNum: 1,
        pageSize: 10
      },
      teaid:'',
      // 分页
      total: 0,
      value1: true,
      dialogTableVisible:false,
      dialogTableVisible2:false,
      dialogTableVisible3:false,

    }
  },
  created() {
    this.selectList()
  },
  mounted: function() {
    // this.selectList()
  },
  methods: {
    // 实现分页
    // 更改了每页大小
    handleSizeChange(val) {
      this.formInline.pageNum = 1
      this.formInline.pageSize = val
      // console.log("val",val)
      // 请求对应的分页数据
      this.selectList()
    },
    // 更改了第几页
    handleCurrentChange(val) {
      this.formInline.pageNum = val
      this.selectList()
    },

    // 重置搜索表单
    handleResetSearch() {
      this.formInline = Object.assign({}, defaultFormInline)
    },
    handleShow(index, row) {
      this.$router.push({ path: 'signList', query: { tid: row.uid } })
    },
    // 跳转到签到进程
    handleViewOrder(index, row) {
      this.$router.push({ path: '/home/signDetail', query: { id: row.id } })
    },

    // 跳转到签到结果
    handleResultOrder(index, row) {
      this.$router.push({ path: '/home/signResult', query: { id: row.id } })
    },

    async onSubmit() {
      await this.selectList()
    },
    // 查询签到发起人
    async selectList() {
      const { data: res } = await this.$http.get('auth/selectList', {
        params: {
          name: this.formInline.name,
          university: this.formInline.university,
          academy: this.formInline.academy,
          pageNum: this.formInline.pageNum,
          pageSize: this.formInline.pageSize
        }
      })
      if (res != null) {
        this.$message.success('查询成功！')
        this.signData = res.User
        this.total = res.total
      }
    },
    changeBox(val) {
      this.selectedList = []
      val.forEach((item) => {
        this.selectedList.push(item)
      })
    },
    Alldelete(){
      this.dialogTableVisible=false
      console.log(this.selectedList);
    },
    confirmdelete(){
      this.dialogTableVisible=true
    },
    addteacher(){
      this.dialogTableVisible2=false
      this.$message.success('新增教师成功！')
      this.dialogTableVisible3=true
    }
  }
}
</script>

<style scoped>

.home-breadcrumb {
  position: relative;
  top: -52px;
  left: 29px;
}
.gldw{
  position: relative;
  top: -52px;
  left: 29px;
  font-weight: 700;
}
.textarea>>>.el-input__inner{
  border-radius: 20px;
  width: 210px;
}
  .jzgh>>>.el-input__inner {
    border: 0;
    
  }
.el-icon-search{
  position: relative;
  top: -30px;
  left: 189px;
  
}



</style>